<template>
	<div>
		<van-tabs v-model="active" :color="defaultColor" @click="onClick" sticky>
			<van-tab v-for="(item,index) in orderNav" :key="index" :title="item.name">
				<div v-if="showSkeleton">
					<div class="width82 backgroundWhite radius10 margin-top-10" v-for="i in 5" :key="i">
						<van-skeleton :row="2" />
						<div class="borderBottom" style="margin: 10px 0;"></div>
						<van-skeleton :row="4" />
						<div class="borderBottom" style="margin: 10px 0;"></div>
						<van-skeleton :row="1" />
					</div>

				</div>
				<van-empty v-if="!showSkeleton&&orderList.length<=0" class="custom-image" :image="emptyImg"
					description="您没有订单" />
				<div v-if="!showSkeleton&&orderList.length>0">
					<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
						<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
							<div class="width82 backgroundWhite radius10 margin-top-10" v-for="(list,key) in orderList"
								:key="key" @click="toDetail(list)">
								<div class="borderBottom padding-bottom-10">
									<div class="betweenCenter">
										<div class="text-12 text999">订单:{{list.orderCode}}</div>
										<div class="text-14">
											{{orderNav[active].name}}
										</div>
									</div>
									<!-- <div class="text-12 text999">订单id(后删):{{list.findOrderId}}</div> -->
									<div class="text-12 text999">创建:{{list.createDate}}</div>
								</div>
								<div class="borderBottom text-14 paddingtb10">
									<div>商品名称:{{list.goodsName}}</div>
									<div>商品ID:{{list.goodsId}}</div>
									<div>证书编号:{{list.certificateItem}}</div>
									<div>配送方式:{{list.deliveryType==1?'取配合一':'取配分离'}}</div><!-- 1.取配合一 2.取配分离 -->
									<!-- <div>登录员身份(后删):{{list.deliverymanType==1?"取货员":list.deliverymanType==2?"配送员":list.deliverymanType==3?"退货取货员":"退货配送员"}}</div> -->
								</div>
								<div class="rowReverse padding-top-10">
									<!-- <div class="solidBtn margin-left-10" v-if="active==0">确认取货</div>
									<div class="solidBtn margin-left-10" v-if="active==1">确认验货</div>
									<div class="solidBtn margin-left-10" v-if="active==1">确认发货</div>
									<div class="solidBtn margin-left-10" v-if="active==2">取货退回</div>
									<div class="solidBtn margin-left-10" v-if="active==3">确认退回</div>
									<div class="solidBtn margin-left-10" v-if="active==4">查看详情</div>
									<div class="strokeBtn margin-left-10" v-if="active!=6">货品凭证</div>
									<div class="strokeBtn margin-left-10">付费凭证</div> -->

									<div :class="[(active==3)?'solidBtn':'strokeBtn']" class=" margin-left-10"
										v-if="active==0||active==3" @click.stop="clickPickup(list)">确认取货</div>
									<!-- <div class="solidBtn margin-left-10" v-if="active==3" @click.stop="clickPickup(list)">确认取货</div> -->
									<div class="solidBtn margin-left-10"
										v-if="active==1&&list.deliverymanType==1&&list.deliveryType==2"
										@click.stop="onLogistics(list)">上传物流</div><!-- 待验货，取配分离取货员 -->
									<div class="solidBtn margin-left-10" v-if="active==1"
										@click.stop="onInspection(list)">验货失败</div>
									<div class="solidBtn margin-left-10" v-if="active==1"
										@click.stop="onInspectionsuccess(list)">验货通过</div>
									<div :class="[(active==0||active==2||active==3)?'strokeBtn':'solidBtn']"
										class="margin-left-10" v-if="active!=6" @click.stop="toVoucher(list)">货品凭证</div>
									<div class="strokeBtn margin-left-10"
										v-if="active==4&&list.deliverymanType==3&&list.deliveryType==2"
										@click.stop="onLogistics(list)">上传物流</div><!-- 待收货，取配分离退货取货员 -->
									<div :class="[(active==6||active==2)?'solidBtn':'strokeBtn']" class="margin-left-10"
										v-if="(active!=0&&active!=3)">查看订单</div>
								</div>
							</div>
						</van-list>
					</van-pull-refresh>
				</div>

			</van-tab>
		</van-tabs>

		<!-- 物流信息 -->
		<van-popup v-model="showLogistics" round>
			<div class="text-16" style="width: 80vw;">
				<div style="text-align: center;padding: 10px 0;position: relative;">
					上传物流信息
					<div style="position: absolute;right: 10px;top: 10px;" @click="showLogistics=false">
						<van-icon size="16" name="cross" />
					</div>

				</div>
				<div>
					<van-form @submit="onSubmit">
						<van-field v-model="logisticsName" name="logisticsName" label="物流公司" placeholder="请输入物流公司"
							:rules="[{ required: true, message: '请输入物流公司' }]" />
						<van-field v-model="logisticsNum" name="logisticsNum" label="物流单号" placeholder="请输入物流单号"
							:rules="[{ required: true, message: '请输入物流单号' }]" />
						<div style="margin: 16px;">
							<van-button style="width: 70vw;margin: auto;" :color="colorBtn" type="primary" round>确认
							</van-button>
						</div>
					</van-form>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import BaseView from "@/views/BaseView.vue"
	import {
		Dialog
	} from 'vant';
	import {
		Toast
	} from 'vant';
	export default {
		extends: BaseView,
		data() {
			return {
				title: "配送订单",
				showSkeleton: true,
				refreshing: false,
				loading: false,
				finished: false,
				showLogistics: false,
				company: "",
				logisticsName: "",
				logisticsNum: "",
				active: 0,
				// orderNav: ["待取货", "待验货","已验货", "待退回", "待收货", "已退回"],
				orderNav: [{
						name: "待取货",
						state: 0
					},
					{
						name: "待验货",
						state: 1
					},
					{
						name: "已验货",
						state: 4
					},
					{
						name: "待退回",
						state: 2
					},
					{
						name: "待收货",
						state: 3
					},
					{
						name: "已退回",
						state: 5
					}
				],
				page: 1, //当前页
				total: 0, //总数
				orderList: [],
				orderState: 0,
				param: {
					page: 1,
					type: 0
				},
				orderId: 0 //订单id
			}
		},
		created() {

			this.active = parseInt(localStorage.getItem("active"))
			this.param.type = parseInt(localStorage.getItem("state"))
			this.getOrderList()
		},
		methods: {
			getOrderList() {
				console.log("订单param", this.param)
				this.$axios.get("/delivery/base/deliveryList", {
					params: this.param
				}).then(res => {
					this.showSkeleton = false
					this.loading = false
					this.refreshing = false
					console.log("订单列表", res)
					if (res.code == 1) {
						var list = res.data
						if (this.page == 1) {
							this.orderList = res.data
						} else {
							this.orderList = this.orderList.concat(res.data)
						}
						this.total = res.count
						if (this.total == this.orderList.length) {
							this.finished = true
						}
						var ids = []
						list.map(val => {
							if (val.scanState == 0) {
								ids.push(val.id)
							}
						})
						// if (ids.length > 0) {
						// 	this.updateOrder(ids)
						// }
					}
				})
			},
			//讲订单状态改为已看
			updateOrder(ids) {
				this.$axios.post("/delivery/base/scanOrder", {
					ids: ids
				}).then(res => {

				})
			},
			//物流提交
			onSubmit(value) {
				value.orderId = this.orderId
				console.log("物流信息", value)
				this.$axios.post("/order/delivery/addOrderLogisticsData", value).then(res => {
					console.log("物流提交", res)
					Toast(res.msg)
					this.showLogistics = false
					this.onRefresh()
				})
			},
			//物流弹框
			onLogistics(list) {
				this.logisticsName = ""
				this.logisticsNum = ""
				this.orderId = list.findOrderId
				this.showLogistics = true
			},
			//切换tab
			onClick(e) {
				console.log("切换", e)
				this.page = 1
				this.showSkeleton = true
				this.finished = false
				this.orderList = []
				localStorage.setItem("active", e)
				localStorage.setItem("state", this.orderNav[e].state)
				this.param.type = this.orderNav[e].state
				this.getOrderList()
			},

			toDetail(list) {
				this.$router.push({
					path: "/orderDetail",
					query: {
						active: this.active,
						orderId: list.findOrderId,
						deliveryManType: list.deliverymanType
					}
				})
			},
			toVoucher(list) {
				this.$router.push({
					path: "/voucher",
					query: {
						orderId: list.findOrderId,
						orderState: list.type
					}
				})
			},
			//刷新
			onRefresh() {
				this.page = 1
				this.showSkeleton = true
				this.finished = false
				this.refreshing = true
				this.orderList = []
				this.getOrderList()
			},
			//加载
			onLoad() {
				this.page++
				this.getOrderList()
			},
			//验货失败
			onInspection(list) {
				Dialog.confirm({
						title: '确认验货',
						message: '请确认此货品未通过验货',
						confirmButtonColor: "#3CCC77"
					})
					.then(() => {
						// on confirm
						this.$axios.post("/order/delivery/inspectionOrder", {
							orderId: list.findOrderId
						}).then(res => {
							console.log("确认验货", res)
							Toast(res.msg);
							this.onRefresh()
						})
					})
					.catch(() => {
						// on cancel
					});
			},
			//验货通过
			onInspectionsuccess(list){
				Dialog.confirm({
						title: '确认验货',
						message: '请确认此货品通过验货',
						confirmButtonColor: "#3CCC77"
					})
					.then(() => {
						// on confirm
						this.$axios.post("/delivery/base/confirmPass", {
							orderId: list.findOrderId
						}).then(res => {
							console.log("确认验货", res)
							Toast(res.msg);
							this.onRefresh()
						})
					})
					.catch(() => {
						// on cancel
					});
			},
			//确认取货
			clickPickup(list) {
				Dialog.confirm({
						title: '确认取货',
						message: '请确认是否取货',
						confirmButtonColor: "#3CCC77"
					})
					.then(() => {
						// on confirm
						if (this.active == 0) { //（待取货）
							this.$axios.post("/order/delivery/affirmClaimGoods", {
								orderId: list.findOrderId
							}).then(res => {
								console.log("待取货确认取货", res)
								Toast(res.msg);
								this.onRefresh()
							})
						} else if (this.active == 3) { //待退回
							this.$axios.post("/order/delivery/affirmRetreatGoods", {
								orderId: list.findOrderId
							}).then(res => {
								console.log("待退回确认取货", res)
								Toast(res.msg);
								this.onRefresh()
							})
						}
					})
					.catch(() => {
						// on cancel
					});


			}
		}
	}
</script>

<style>
</style>